<template>
	<view class="login">
		<view class="t-login">
			<!-- 页面装饰图片 -->
			<!-- <image class="img-a" src="@/static/2.png"></image>
			<image class="img-b" src="@/static/3.png"></image> -->
			<!-- 标题 -->
			<!-- <view class="logo">
				<image src="https://www.ldxs.info/static/logo.png" mode="heightFix"></image>
			</view> -->
			<view class="t-b">{{ title }}</view>
			<form class="cl">
				<view class="t-a">
					<image :src="getUrl('/sj.png')"></image>
					<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="phone" />
				</view>
				<view class="t-a">
					<image :src="getUrl('/yz.png')"></image>
					<input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="authCode" style="width: 70%;"/>
					<view v-if="showText" class="t-c" @tap="getCode()">发送短信</view>
					<view v-else class="t-c" style="background-color: #A7A7A7;">重新发送({{ second }})</view>
				</view>
				<button @tap="login()">登 录</button>
				<!-- <view class="reg" @tap="reg()">注 册</view>  -->
			</form>
			<view class="form-item agree">
				<u-checkbox-group v-model="checkbox">
					<u-checkbox shape="circle" activeColor="#5EB847" :label="' '" :name="true">
					</u-checkbox>
				</u-checkbox-group>
				<view class="agree-text">
					我已阅读并同意
					<view class="agree-text-h" @click="toHtmlPage('https://www.gongkej.com/agreement_yonghu.html')">《用户协议》</view>
					和
					<view class="agree-text-h" @click="toHtmlPage('https://www.gongkej.com/agreement_yinsi.html')">《隐私政策》</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { getUrl } from '@/utils/imagePlugin'
// import { getAuthCode, login, getUserInfo, getSTSAuthorize, getResource, getButtonList } from '@/api/login.js'
// import logo from 'https://www.ldxs.info/static/logo.png'

export default {
	data() {
		return {
			// logo,
			title: '欢迎回来！',
			second: 60, //默认60秒
			showText: true, //判断短信是否发送
			phone: '', //手机号码
			authCode: '' ,//验证码
			checkbox: [true],
		};
	},
	onLoad() {},
	methods: {
		getOss(){
			this.$http.get(getSTSAuthorize).then(res => {
				let ossConfig = {
					uploadImageUrl: 'https://' + res.data.bucket + '.' + res.data.endpoint, //阿里云上传域名
					AccessKeySecret: res.data.accessKeySecret, //Secret，登录oss控制台查看
					OSSAccessKeyId: res.data.accessKeyId, //KeyId，登录oss控制台查看
					timeout: 87600,
					maxSize: 128 * 1024 * 1024 //上传文件的大小限制,128mb
				}
				uni.setStorageSync('ossConfig', ossConfig)
			})
			
			this.$http.get(getButtonList).then(res => {
				if(res.code == 200){
					uni.setStorageSync('buttonList', JSON.stringify(res.data))
				}
			})
		},
		getResource(){
			this.$http.get(getResource).then(res => {
				if(res.code == 200){
					let permissions = res.data && res.data.map(function (item, key, ary) {
						return {
							url: item.url,
							icon: item.icon,
						}
					})
					uni.setStorageSync('permissions', permissions)
				} else {
					uni.showToast({ title: res.message, icon: 'none' });
				}
			}).catch(err => {
				uni.showToast({ title: err.message, icon: 'none' });
			})
		},
		//当前登录按钮操作
		login() {
			var that = this;
			if (!that.phone) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return;
			}
			if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			if (!that.authCode) {
				uni.showToast({ title: '请输入验证码', icon: 'none' });
				return;
			}
			if (this.checkbox.length == 0) {
				uni.showToast({ title: '为了更好的保障您的权益，请您阅读并同意《用户协议》和《隐私政策》', icon: 'none' });
				return;
			}
			let params = {
				username: this.phone,
				telephone: this.phone,
				authCode: this.authCode,
			}
			this.$http.post(login, params).then(res => {
				if(res.code == 200){
					uni.setStorageSync('token', res.data.tokenHead + res.data.token)
					this.$http.get(getUserInfo).then(infoRes => {
						if(infoRes.code == 200){
							uni.setStorageSync('phone', infoRes.data.phone)
							uni.setStorageSync('icon', infoRes.data.icon)
							uni.setStorageSync('nickname', infoRes.data.nickname)
							uni.setStorageSync('userId', infoRes.data.id)
							uni.setStorageSync('realNameStatus', infoRes.data.realNameStatus)
							uni.setStorageSync('enterpriseCertification', infoRes.data.enterpriseCertification)
							uni.setStorageSync('openId', infoRes.data.openId)
							uni.setStorageSync('cityName', infoRes.data.cityName)
							this.getOss()
							this.getResource()
							uni.showToast({ title: '登录成功！', icon: 'none' });
							
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/index/index/index'
								})
							}, 1500)
						}
					})
				} else {
					uni.showToast({ title: res.message, icon: 'none' });
				}
			}).catch(err => {
				uni.showToast({ title: '登录失败！', icon: 'none' });
			})
		},
		
		//获取短信验证码
		getCode() {
			var that = this;
			
			if (!this.phone) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return;
			}
			if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			
			let interval = setInterval(() => {
				that.showText = false;
				let times = that.second - 1;
				//that.second = times<10?'0'+times:times ;//小于10秒补 0
				that.second = times;
			}, 1000);
			let interval2 = setTimeout(() => {
				clearInterval(interval);
				that.second = 60;
				that.showText = true;
			}, 60000);
			this.$http.get(getAuthCode, {telephone: this.phone}).then(res => {
				if(res.code == 200){
					// this.authCode = res.data
					uni.showToast({ title: '发送成功，请查收', icon: 'none' });
				} else {
					clearInterval(interval);
					clearInterval(interval2);
					that.second = 60;
					that.showText = true;
					uni.showToast({ title: res.message, icon: 'none' });
				}
			}).catch(err => {
				clearInterval(interval);
				clearInterval(interval2);
				that.second = 60;
				that.showText = true;
				uni.showToast({ title: '发送失败', icon: 'none' });
			})
		},
		
		reg() {
			// uni.showToast({ title: '注册跳转', icon: 'none' });
			uni.navigateTo({
				url: '/pages/login/register/register'
			})
			
		},
		
		toHtmlPage(url){
			uni.navigateTo({
				url: '/pages/htmlPage/htmlPage?url=' + url
			})
		},
	}
};
</script>
<style lang="less" scoped>
.login{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	background: #ffffff;
}
	
.img-a {
	position: absolute;
	width: 100%;
	top: -280rpx;
	right: -100rpx;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	margin-bottom: -200rpx;
}
.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000;
}

.t-login button {
	font-size: 28rpx;
	background: #5EB847;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	// margin-bottom: 50rpx;
	// background: #f8f7fc;
	// border: 1px solid #e9e9e9;
	font-size: 28rpx;
	// border-radius: 50rpx;
}

.t-login .t-a {
	position: relative;
	width: 100%;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.t-login .t-a image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	border-right: 2rpx solid #dedede;
	padding-right: 20rpx;
	box-sizing: content-box;
}

.t-login .logo{
	// height: 200rpx;
	padding-top: 200rpx;
}

.t-login .logo image{
	height: 200rpx;
}

.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #000;
	// padding-top: 30rpx;
	padding-top: 200rpx;
	padding-bottom: 120rpx;
	font-weight: bold;
}

.t-login .t-b image{
	height: 200rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5EB847;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.agree{
	display: flex;
	justify-content: center;
	margin: 40upx 0;
	
	.agree-text{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		color: #666;
		text-align: center;
		font-family: "PingFang SC";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		
		.agree-text-h{
			color: #5EB847;
			margin: 0 12rpx;
		}
	}

}

.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}
			
.t-login .uni-input-placeholder {
	color: #000;
}
</style>
